<template>
	<div class="report-container">
		<!-- 审核确认弹框 -->
		<AuditConfirm ref="auditDialog" :submit="auditOne" />
		<div class="review-content">
			<div class="head">
				<span class="title">
					{{ $t('member.member_change_audit_detail') }}
				</span>
				<div v-if="type" class="right-btn">
					<el-button plain @click="goBack">
						{{ $t('common.cancel') }}
					</el-button>
					<el-button type="success" @click="() => $refs.auditDialog.successOpen()">
						{{ $t('member.approved') }}
					</el-button>
					<el-button type="danger" @click="() => $refs.auditDialog.dangerOpen()">
						{{ $t('member.audit_ejection') }}
					</el-button>
				</div>
				<div v-else class="right-btn">
					<el-button plain @click="goBack">
						{{ $t('common.back') }}
					</el-button>
				</div>
			</div>
			<div class="main-content detailBoxStyle">
				<div v-if="rowData" class="review-content">
					<p class="name">
						{{ $t('member.member_account_information') }}
					</p>
					<div class="review-flex">
						<div>
							{{ $t('common.number_type') }}:
							{{
								typeFilter(
									memberInfo.accountType,
									'accountType'
								)
							}}
						</div>
						<div>
							{{ $t('common.belong_merchant') }}:
							{{ memberInfo.merchantName }}
						</div>
						<div>
							{{ $t('common.top_agent') }}:
							{{ memberInfo.parentProxyName }}
						</div>
					</div>
					<div class="review-flex">
						<div>
							{{ $t('member.belong_club') }}:
							{{ memberInfo.clubName || '-' }}
						</div>
						<div>
							{{ $t('common.member_number') }}:
							{{ rowData.userName || '-' }}
						</div>
						<div>
							{{ $t('common.account_status') }}:
							<el-tag
								v-if="
									memberInfo.loginLockStatus === 0 &&
										memberInfo.gameLockStatus === 0 &&
										memberInfo.paymentLockStatus === 0
								"
								size="mini"
								type="success"
							>
								{{ $t('common.account_status_normal') }}
							</el-tag>
							<el-tag
								v-if="memberInfo.gameLockStatus === 1"
								size="mini"
								style="margin-right:10px"
							>
								{{ $t('common.game_lock_status') }}
							</el-tag>
							<el-tag
								v-if="memberInfo.paymentLockStatus === 1"
								size="mini"
								type="warning"
								style="margin-right:10px"
							>
								{{ $t('common.account_lock_status') }}
							</el-tag>
							<el-tag
								v-if="memberInfo.loginLockStatus === 1"
								size="mini"
								type="danger"
								style="margin-right:10px"
							>
								{{ $t('common.login_lock_status') }}
							</el-tag>
						</div>
					</div>
					<div class="review-flex">
						<div>
							{{ $t('member.number_of_bank_cards') }}:
							{{ bankCardNum || '-' }}
						</div>
						<div>
							{{ $t('member.virtual_account_num') }}:
							{{ virtualAccountNum || '-' }}
						</div>
						<div>
							安全校验: {{ checkTypes[memberInfo.checkType] || '-'}}
						</div>
					</div>
					<div class="review-flex">
						<div>
							{{ $t('common.risk_control_level') }}:
							{{ memberInfo.windControlName || '-' }}
						</div>
						<div>
							{{ $t('member.label_name') }}:
							{{ memberInfo.labelName || '-' }}
						</div>
						<div class="show-remark">
							{{ $t('member.remarks') }}:
							{{ memberInfo.remark || '-' }}
						</div>
					</div>
				</div>
				<div v-if="rowData" class="review-content more-height">
					<p class="name">{{ $t('member.apply_info') }}</p>
					<div class="review-flex">
						<div>
							{{ $t('member.applicant') }}:
							{{ rowData.applyName || '-' }}
						</div>
						<div>
							{{ $t('member.application_time') }}:
							{{ auditInfo.createdAt || '-' }}
						</div>
						<div class="show-remark">
							{{ $t('member.apply_remark') }}:
							{{ auditInfo.applyRemark || '-' }}
						</div>
					</div>
					<div class="review-flex">
						<el-table
							border
							size="mini"
							:data="[1]"
							style="width: 100%"
							:header-cell-style="getRowClass"
							highlight-current-row
						>
							<el-table-column
								align="center"
								:label="$t('member.before_modify')"
							>
								<template>
									<template
										v-if="Number(rowData.applyType) === 2"
									>
										{{
											typeFilter(
												rowData.beforeModify,
												'genderType'
											)
										}}
									</template>
									<template v-else-if="Number(rowData.applyType) === 11">
										<span>{{ $t('member.bmh_id') }}: {{ rowData.bmhId || '-' }}</span>
										<br />
										<span>{{ $t('member.bmh_account') }}: {{ rowData.bmhName || '-' }}</span>
									</template>
									<template v-else-if="Number(rowData.applyType) === 12">
										<span>{{ $t('member.yh_account_name') }}: {{ rowData.yhAccount || '-' }}</span>
										<br />
										<span>{{ $t('member.yh_account') }}: {{ rowData.yhAccountName || '-' }}</span>
									</template>
									<template v-else>
										{{
											rowData.beforeModify
												? rowData.beforeModify
												: '-'
										}}
									</template>
								</template>
							</el-table-column>
							<el-table-column
								align="center"
								:label="$t('member.after_modify')"
							>
								<template>
									<template
										v-if="Number(rowData.applyType) === 2"
									>
										{{
											typeFilter(
												rowData.afterModify,
												'genderType'
											)
										}}
									</template>
									<template
										v-else-if="rowData.applyType === '13'"
									>
										<Copy
											v-if="rowData.afterModify"
											:title="rowData.afterModify"
											:copy="copy"
										>
											{{ rowData.afterModify }}
										</Copy>
									</template>
									<template v-else-if="Number(rowData.applyType) === 11">
										<span>{{ $t('member.bmh_id') }}: -</span>
										<br />
										<span>{{ $t('member.bmh_account') }}: -</span>
									</template>
									<template v-else-if="Number(rowData.applyType) === 12">
										<span>{{ $t('member.yh_account_name') }}: -</span>
										<br />
										<span>{{ $t('member.yh_account') }}: -</span>
									</template>
									<template v-else>
										{{
											rowData.afterModify
												? rowData.afterModify
												: '-'
										}}
									</template>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
				<div v-if="rowData" class="review-content">
					<p class="name">{{ $t('member.audit_information') }}</p>
					<div class="review-flex">
						<div v-if="auditInfo.auditStatus === 1">
							{{ $t('member.reviewed_by') }}: -
						</div>
						<div v-else>
							{{ $t('member.reviewed_by') }}:
							{{ auditInfo.auditName || '-' }}
						</div>
						<div>
							{{ $t('member.audit_time') }}:
							{{ auditInfo.auditDatetime || '-' }}
						</div>
						<div class="show-remark">
							{{ $t('member.review_remarks') }}:
							{{ rowData.auditRemark || '-' }}
						</div>
					</div>
				</div>
			</div>
		</div>
		<el-dialog
			:title="`${$t('member.submit_for_confirmation')}`"
			center
			:visible.sync="visible"
			:before-close="closeFormDialog"
			width="610px"
			class="audit-confirm"
		>
			<el-form
				ref="form"
				:model="form"
				:rules="formRules"
				label-width="120px"
			>
				<el-form-item
					:label="`${$t('member.submit_audit_information')}:`"
					prop="auditRemark"
				>
					<el-input
						v-model.trim="form.auditRemark"
						clearable
						type="textarea"
						show-word-limit
						:maxlength="500"
						:autosize="{ minRows: 4, maxRows: 4 }"
						style="width: 380px"
						:placeholder="$t('common.please_enter')"
						@input="handleInput"
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="visible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="auditOne">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
// import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import list from '@/mixins/list'
import { NO_SPECIAL_CHAR } from '@/utils/pattern'
import AuditConfirm from '@/components/AuditConfirm'

export default {
	name: routerNames.memberChangeReview,
	components: {
		AuditConfirm
	},
	mixins: [list],
	props: {
		// 审核 true 仅返回 false
		type: Boolean,
		rowData: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		this.auditOne = this.throttle(this.auditOne, 1000)
		return {
			memberInfo: '',
			virtualAccountNum: '',
			bankCardNum: '',
			auditInfo: '',
			form: {
				auditRemark: ''
			},
			checkTypes: {
				0: '无校验',
				1: '身份验证器',
				2: '邮箱校验',
				3: '手机校验'
			},
			visible: false,
			action: false
		}
	},
	computed: {
		accountType() {
			return this.globalDics.accountType
		},
		deviceType() {
			return this.globalDics.deviceType
		},
		applyType() {
			return this.globalDics.applyType
		},
		formRules() {
			return {
				auditRemark: [
					{
						required: true,
						message: this.$t('member.greater_than2'),
						trigger: 'blur'
					},
					{
						min: 2,
						max: 500,
						message: this.$t('member.greater_than2'),
						trigger: 'blur'
					}
				]
			}
		}
	},
	created() {
		this.getInfo()
	},
	methods: {
		handleInput(val) {
			this.form.auditRemark = val.replace(NO_SPECIAL_CHAR, '')
		},
		closeFormDialog() {
			this.$refs.form.resetFields()
			this.visible = false
		},
		confirm(action) {
			this.form.auditRemark = undefined
			this.$nextTick(() => {
				this.$refs.form.clearValidate()
			})
			this.visible = true
			this.remark = ''
			this.action = action
		},
		auditOne(form) {
			const params = {
				id: this.rowData.id,
				userId: this.rowData.userId,
				remark: form.remark,
				auditStatus: form.status
			}
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			this.$api
				.audit(params)
				.then((res) => {
					if (res.code === 200) {
						loading.close()
						this.$message({
							type: 'success',
							message:
								this.$t('common.action_success') +
								'!'
						})
						this.visible = false
						this.goBack()
					} else {
						this.$message({
							message: res.msg,
							type: 'error'
						})
					}
				})
				.catch(() => {
					loading.close()
				})
		},
		// auditOne(form) {
		// 	if (this.action) {
		// 		const params = {
		// 			id: this.rowData.id,
		// 			userId: this.rowData.userId,
		// 			remark: form.remark,
		// 			auditStatus: form.status
		// 		}
		// 		this.$refs.form.validate((valid) => {
		// 			if (valid) {
		// 				const loading = this.$loading({
		// 					lock: true,
		// 					text: 'Loading',
		// 					spinner: 'el-icon-loading',
		// 					background: 'rgba(0, 0, 0, 0.7)'
		// 				})
		// 				this.$api
		// 					.audit(params)
		// 					.then((res) => {
		// 						if (res.code === 200) {
		// 							loading.close()
		// 							this.$message({
		// 								type: 'success',
		// 								message:
		// 									this.$t('common.action_success') +
		// 									'!'
		// 							})
		// 							this.visible = false
		// 							this.goBack()
		// 						} else {
		// 							this.$message({
		// 								message: res.msg,
		// 								type: 'error'
		// 							})
		// 						}
		// 					})
		// 					.catch(() => {
		// 						loading.close()
		// 					})
		// 			}
		// 		})
		// 	} else {
		// 		this.$refs.form.validate((valid) => {
		// 			if (valid) {
		// 				const loading = this.$loading({
		// 					lock: true,
		// 					text: 'Loading',
		// 					spinner: 'el-icon-loading',
		// 					background: 'rgba(0, 0, 0, 0.7)'
		// 				})
		// 				const params = {
		// 					id: this.rowData.id,
		// 					userId: this.rowData.userId,
		// 					remark: this.form.auditRemark,
		// 					auditStatus: this.action ? 1 : 2
		// 				}
		// 				this.$api
		// 					.audit(params)
		// 					.then((res) => {
		// 						loading.close()
		// 						if (res.code === 200) {
		// 							this.$message({
		// 								type: 'success',
		// 								message:
		// 									this.$t('common.action_success') +
		// 									'!'
		// 							})
		// 							this.visible = false
		// 							this.goBack()
		// 						} else {
		// 							this.$message({
		// 								message: res.msg,
		// 								type: 'error'
		// 							})
		// 						}
		// 					})
		// 					.catch(() => {
		// 						loading.close()
		// 					})
		// 			}
		// 		})
		// 	}
		// },
		goBack() {
			this.$emit('goBack')
		},
		getInfo() {
			const params = {
				id: this.rowData.id
			}
			this.$api.recordInfo(params).then((res) => {
				if (res.code === 200) {
					this.memberInfo = res.data.memberInfo
					this.auditInfo = res.data.auditInfo
					this.virtualAccountNum = res.data.virtualAccountNum
					this.bankCardNum = res.data.bankCardNum
				} else {
					this.loading = false
					this.$message({
						message: res.msg,
						type: 'error'
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}

.review-content {
	.head {
		height: 70px;
		line-height: 70px;
		width: 100%;
		background: #000;
		border-radius: 2px;
		padding: 0 30px;

		.title {
			font-weight: 600;
			color: rgb(192, 190, 190);
		}

		.right-btn {
			float: right;
		}
	}

	.main-content {
		.review-content {
			min-height: 150px;
			border-top: 0px;
			padding: 30px;

			.name {
				font-weight: 600;
			}

			.review-flex {
				position: relative;
				width: 100%;
				margin-top: 20px;

				div {
					display: inline-block;
					width: 33%;
					vertical-align: top;
					word-break: break-all;
				}
				.show-remark {
					word-wrap: break-word;
					vertical-align: top;
				}
			}
		}
	}
}
</style>
